<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>电子发票普票</title>
  <script src="./dist/qrcode.js"></script>
  <script src="./dist/moment.js"></script>
  <style>
        @media print {
      /* 设置横向打印 */


      /* 设置纵向打印 */
      @page {
        size: portrait;
      }
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .centered-div {
      position: relative;
      width: 1024px;
      height: 682px;
      background-image: url('./dist/dzfppupiao_00.png');
      background-size: cover;
      background-position: center;
      font-size: 15px;
      font-weight: 300;
      color: #000;
    }

    .qorcode {
      top: 40px;
      left: 4%;
      position: absolute;
    }

    .sunm {
      font-family: 'SimSun';
    }

    .post {
      position: absolute;
    }

    .number {
      top: 52px;
      left: 81%;
    }

    .date {
      top: 82px;
      left: 81%;
    }

    .name {
      top: 163px;
      left: 94px;
    }

    .code {
      top: 213px;
      left: 264px;
    }

    .name-right {
      top: 161px;
      left: 584px;
    }

    .code-right {
      top: 213px;
      left: 754px;
    }

    .table {
      top: 270px;
      left: 2%;
      width: 100%;

    }

    td {
      text-align: left;
    }

    .table1 {
      top: 440px;
      left: 2%;
      width: 100%;

    }

    .a-total {
      top: 474px;
      left: 30%;
      font-size: 16px;
    }

    .total-v {
      top: 474px;
      left: 75.2%;
      font-size: 17px;
      font-weight: 560;
      line-height: 24px;
      /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif */
    }

    .remark {
      top: 514px;
      left: 6%;

    }

    .kpr {
      top: 630px;
      left: 15%;
    }

    #exportButton {
      margin: 10px;
      padding: 8px 16px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      position: absolute;
      top: 24px;
      right: 24px;
    }

    #exportButton:hover {
      background-color: #0056b3;
    }
  </style>
</head>

<body>
  <button id="exportButton" onclick="printPage()">导出</button>
  <div class="centered-div">
    <div id="qrcode" class="qorcode">

    </div>
    <div class="number post">
      23532000000018703272
    </div>
    <div class="date post">
      2023年10月31日
    </div>
    <div class="name post sunm">海蒂通信技术有限公司</div>
    <div class="code post">91530112MA6N0JUX1G</div>
    <div class="name-right post sunm">海蒂通信技术有限公司</div>
    <div class="code-right post">91530112MA6N0JUX1G</div>
    <table class="table post" id="tb">
    </table>
    <table class="table1 post" id="tb1">

    </table>
    <div class="a-total post">
      柒拾壹万捌仟伍佰伍拾陆圆捌角叁分
    </div>
    <div class="total-v post">
      718556.83
    </div>
    <div class="remark post">
      购方开户银行:-; 银行账号:-; </br>
      销方开户银行:广南县农村信用合作联社; 银行账号:4300023832060012; </br>
      </br>
      收款人:袁海锋; 复核人:杨友;
    </div>
    <div class="kpr post">

    </div>
  </div>
</body>
<script>
  var queryString = window.location.search
  var urlParams = new URLSearchParams(queryString)
  var id = urlParams.get('id')
  var info = {
  }
  function printPage() {
    window.print()
  }
  function renderCode() {
    const qrCodeDiv = document.getElementById('qrcode')
    const text =`http://sys.ynjov.com/invoicea.html?no=${info.invoiceNumber.trim()}&date=${info.invoiceDate.trim()}&amount=${info.totalAmount.trim()}`
    // 创建二维码实例
    const qrCode = new QRCode(qrCodeDiv, {
      text: text,
      width: 88,
      height: 88,
    })

    // 获取 canvas 元素
    const canvas = qrCodeDiv.querySelector('canvas')

    // 创建一个新的 Image 对象，加载 Logo 图片
    const logoImage = new Image()
    logoImage.src = './dist/logo.png' // 替换为你的 Logo 图片路径

    // 等待 Logo 图片加载完成后，在二维码上绘制 Logo
    logoImage.onload = function () {
      const ctx = canvas.getContext('2d')

      // 在 canvas 上绘制二维码
      ctx.drawImage(canvas, 12, 12)

      // 设置 Logo 的位置和大小
      const logoWidth = canvas.width * 0.2 // 调整 Logo 大小
      const logoHeight = canvas.height * 0.2 // 调整 Logo 大小
      const x = (canvas.width - logoWidth) / 2 // 居中
      const y = (canvas.height - logoHeight) / 2 // 居中

      // 在二维码上绘制 Logo
      ctx.drawImage(logoImage, x, y, logoWidth, logoHeight)
    }
  }
  function renderCntent() {
    document.querySelector('.number').innerText = info.invoiceNumber
    document.querySelector('.date').innerText = moment(info.invoiceDate).format('YYYY年MM月DD日')
    document.querySelector('.name').innerText = info.buyerCompanyName
    document.querySelector('.code').innerText = info.buyerTaxID
    document.querySelector('.name-right').innerText = info.sellerCompanyName
    document.querySelector('.code-right').innerText = info.sellerTaxID
    document.querySelector('.a-total').innerText = info.totalAmountInWords
    document.querySelector('.total-v').innerText = info.totalAmount
    document.querySelector('.remark').innerHTML = `购方开户银行:${info.buyerBankAndAccount}</br>销方开户银行:${info.sellerBankAndAccount}</br></br>收款人:${info.payee}; 复核人:${info.reviewer};`
    document.querySelector('.kpr').innerText = info.payee
  }
  window.onload = function () {
    fetch('http://api.ynjov.com:8080/api/getInvoicesDetail/' + id)
      .then(response => {
        
        if (!response.ok) {
          throw new Error('Network response was not ok')
        }
        return response.json()
      })
      .then(({ data, items }) => {
        info = data
        let str = '', total1 = 0, total2 = 0
        items.forEach(item => {
          str += `
          <tr>
        <td style="width: 17%">${item.goodsOrServicesName}</td>
        <td style="width: 10%">${item.specifications}</td>
        <td style="width: 10%">${item.unit}</td>
        <td style="width: 10%;text-align: center;">${item.quantity}</td>
        <td style="width: 12%">${item.unitPrice}</td>
        <td style="width: 12%">${item.amount}</td>
        <td style="width: 10%">${item.taxRate}%</td>
        <td style="width: 10%;">${item.taxAmount}</td>
      </tr>`
          total1 = Number(total1) + Number(item.amount)
          total2 = Number(total2) + Number(item.taxAmount)
        })

        // 找到父元素
        const parentElement = document.getElementById('tb')
        // 将子元素添加到父元素中
        parentElement.innerHTML = str
        document.getElementById('tb1').innerHTML = (`
        <tr>
        <td style="width: 17%"></td>
        <td style="width: 10%"></td>
        <td style="width: 10%"></td>
        <td style="width: 10%;text-align: center;"></td>
        <td style="width: 12%"></td>
        <td style="width: 12%">${total1}</td>
        <td style="width: 10%"></td>
        <td style="width: 10%;">${total2}</td>
      </tr>
      `)
        renderCode()
        renderCntent()
      })
      .catch(error => {
        console.error('Fetch error:', error)
      })
  };
</script>

</html>